<template>
    <div class="main-page">
        <el-form>
            <el-row>
                <el-col :span="10">
                    <el-button type="primary" @click="this.initData" size="mini" icon="el-icon-search">修改</el-button>
                    <el-button type="info" @click="this.initData" size="mini" icon="el-icon-search">删除</el-button>
                    <el-button type="warn" @click="this.initData" size="mini" icon="el-icon-search">打开提醒</el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                :row-class-name="tableRowClassName">
                style="width: 100%">
                <el-table-column
                    property="uid"
                    label="编号"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="name"
                    label="规则名称"
                    min-width="10%">
                    <template scope="scope">
                        <el-button type="primary" size="mini" plain @click="selectUserDetail(index,scope.row)">
                            {{scope.row.name}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    property="starttime"
                    label="开始时间"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="starttime"
                    label="结束时间"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="status"
                    label="状态"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button @click="editRuleOper(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="deleteRule(scope.$index,scope.row)" type="text" size="small">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.pager.pageNo"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="this.pager.pageSize"
                    layout=" prev, pager, next,jumper"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog
            title=""
            :visible.sync="ModifyRuleDialog"
        >
            <scheduleClass ref="modifyRulePanel"></scheduleClass>
            <template slot="footer">
                <el-row type="flex" justify="end">
                    <el-button @click="closeadd" type="info" plain size="mini">取消</el-button>
                    <el-button @click="modifyRuleOper" type="primary" plain size="mini">确认</el-button>
                </el-row>
            </template>

        </el-dialog>



    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '@/components/headTop'
    import {userList} from '@/api/getData'
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        name: "clsDetailPeriodRecord",
        data() {
            return {
                ModifyRuleDialog:false,
                pager: {pageNo: 1, pageSize: 5},
                formData: {
                    starttime: null,

                },
                loading: false,
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,

        },
        computed: {
            ...mapGetters(['adminInfo'])
        },
        created() {
        },
        mounted() {

        },
        methods: {
            ...mapActions(['getPeriod']),
            initData() {
                this.loading = true;
                this.tableData = [];
                var list = v.data.values;
                this.count = v.data.totalCount;
                list.forEach(item => {
                    const tableData = {};
                    tableData.id=item.id;
                    tableData.name=item.name;
                    tableData.starttime=item.starttime;
                    tableData.endtime=item.endtime;
                    tableData.status=item.status;
                    this.tableData.push(tableData);

                });
                this.loading = false;
            },
            closeadd: function () {
                this.ModifyRuleDialog = false;
                this.addForm = {};

            },

            deleteRule(index,rid){
                this.$confirm('确认删除？')
                    .then(_ => {
                        this.deleteconfirm(row.id);
                    })
                    .catch(_ => {
                    });


            },
            editRuleOper(index,id){



            },
           async  modifyRuleOper(index,id){
                this.ismodify = true;
                this.ModifyDialogVisible = true;
                const res = await detailRuleApi({data: {id: row.id}});
                if (res.success == true) {
                    this.$refs.modifyRulePanel.childForm = res.data;
                } else {

                }

            },
           async  deleteconfirm(id){
                const res = await
                deleteRuleApi({data: {"id": id}});
                if (res.success == true) {
                    this.$notify({
                        title: '成功',
                        message: '删除成功!',
                        type: 'success'
                    });
                    this.initData();
                }
                else {
                    console.error(
                        "something is error"
                    )

                }

            },

          modifyRulePanel(index,rid){
                this.modifystuid = id;
                this.ModifyDialogVisible = true;
            },
              handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.pager.pageNo = val;
                this.initData()
            },
         async modifyRule(){
              const res=await modifyRecordApi({data:{id:id}});
        if(res.success==true){


       }
       else {

       }

            },





        },
    }
</script>
<style lang="less">
    @import '../../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }
</style>
